<template>
  <div class="resume-container">
    <!-- 基本信息 -->
    <section class="resume-section">
      <h2>基本信息</h2>
      <div class="info-grid">
        <div v-if="basicInfo.name"><strong>姓名：</strong>{{ basicInfo.name }}</div>
        <div v-if="basicInfo.gender"><strong>性别：</strong>{{ basicInfo.gender === 'male' ? '男' : '女' }}</div>
        <div v-if="basicInfo.phone"><strong>手机：</strong>{{ basicInfo.phone }}</div>
        <div v-if="basicInfo.email"><strong>邮箱：</strong>{{ basicInfo.email }}</div>
        <div v-if="basicInfo.status"><strong>当前身份：</strong>{{ 
          basicInfo.status === 'student' ? '在校学生' :
          basicInfo.status === 'employee' ? '在职人员' : ''
        }}</div>
      </div>
    </section>

    <!-- 教育背景 -->
    <section class="resume-section" v-if="educations.length">
      <h2>教育背景</h2>
      <div class="education-item" v-for="(edu, index) in educations" :key="index">
        <h3>{{ edu.school }} - {{ edu.college }}</h3>
        <p>{{ edu.major }} | {{ 
          edu.degree === 'bachelor' ? '本科' :
          edu.degree === 'master' ? '硕士' :
          edu.degree === 'phd' ? '博士' : '其他'
        }}</p>
        <p>{{ formatDateRange(edu.duration) }}</p>
        <p>{{ edu.gradeType === 'gpa' ? 'GPA' : edu.gradeType === 'score' ? '成绩' : '排名' }}: {{ edu.grade }}</p>
        <div v-if="edu.courses.length">
          <h4>主修课程</h4>
          <ul>
            <li v-for="(course, i) in edu.courses" :key="i">
              {{ course.name }} - {{ course.score }}
            </li>
          </ul>
        </div>
      </div>
    </section>

    <!-- 工作经历 -->
    <section class="resume-section" v-if="workExperiences.length">
      <h2>工作经历</h2>
      <div class="work-item" v-for="(work, index) in workExperiences" :key="index">
        <h3>{{ work.company }} - {{ work.position }}</h3>
        <p>{{ work.employmentType === 'full-time' ? '全职' : 
              work.employmentType === 'part-time' ? '兼职' :
              work.employmentType === 'internship' ? '实习' :
              work.employmentType === 'contract' ? '合同工' : '自由职业' }}</p>
        <p>{{ formatDateRange(work.duration) }}</p>
        <p>{{ work.description }}</p>
      </div>
    </section>

    <!-- 项目经验 -->
    <section class="resume-section" v-if="projects.length">
      <h2>项目经验</h2>
      <div class="project-item" v-for="(project, index) in projects" :key="index">
        <h3>{{ project.name }} - {{ project.role }}</h3>
        <p>{{ formatDateRange(project.duration) }}</p>
        <p>{{ project.description }}</p>
      </div>
    </section>

    <!-- 技能特长 -->
    <section class="resume-section" v-if="skills.length">
      <h2>技能特长</h2>
      <div class="skills-grid">
        <div class="skill-item" v-for="(skill, index) in skills" :key="index">
          <p><strong>{{ skill.name }}</strong> - {{ 
            skill.proficiency === 'beginner' ? '入门' :
            skill.proficiency === 'intermediate' ? '中等' :
            skill.proficiency === 'advanced' ? '熟练' : '精通'
          }}</p>
        </div>
      </div>
    </section>

    <!-- 校园经历 -->
    <section class="resume-section" v-if="campusExperiences.length">
      <h2>校园经历</h2>
      <div class="campus-item" v-for="(exp, index) in campusExperiences" :key="index">
        <h3>{{ exp.organization }} - {{ exp.position }}</h3>
        <p>{{ 
          exp.type === 'club' ? '社团组织' :
          exp.type === 'service' ? '学生服务' : '社会实践'
        }}</p>
        <p>{{ formatDateRange(exp.duration) }}</p>
        <p>{{ exp.description }}</p>
      </div>
    </section>

    <!-- 求职意向 -->
    <section class="resume-section" v-if="objectives.length">
      <h2>求职意向</h2>
      <div class="objective-item" v-for="(obj, index) in objectives" :key="index">
        <p><strong>期望岗位：</strong>{{ obj.position }}</p>
        <p><strong>期望薪资：</strong>{{ obj.salary }}</p>
      </div>
    </section>

    <!-- 奖项 -->
    <section class="resume-section" v-if="awards.length">
      <h2>奖项</h2>
      <div class="award-item" v-for="(award, index) in awards" :key="index">
        <h3>{{ award.name }}</h3>
        <p><strong>获奖时间：</strong>{{ formatDate(award.date) }}</p>
        <p><strong>颁奖单位：</strong>{{ award.organization }}</p>
        <p><strong>奖项级别：</strong>{{ 
          award.level === 'national' ? '国家级' :
          award.level === 'provincial' ? '省级' :
          award.level === 'city' ? '市级' :
          award.level === 'school' ? '校级' : '其他'
        }}</p>
      </div>
    </section>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  colorTemplate: {
    type: Array,
    default: () => ['#1890ff', '#909399', '#000000']
  },
  initialData: {
    type: Object,
    required: true
  },
})



// 更新数据映射关系
const basicInfo = computed(() => props.initialData.basic || {})
const educations = computed(() => props.initialData.education || [])
const workExperiences = computed(() => props.initialData.workExperience || [])
const projects = computed(() => props.initialData.projects || [])
const skills = computed(() => props.initialData.skills || [])
const campusExperiences = computed(() => props.initialData.campusExperience || [])
const objectives = computed(() => props.initialData.jobObjectives || [])
const awards = computed(() => props.initialData.awards || [])

// 格式化单个日期（精确到月）
const formatDate = (dateStr) => {
  try {
    const date = new Date(dateStr)
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit'
    }).replace('/', '-')
  } catch {
    return dateStr
  }
}

// 格式化日期范围（精确到月）
const formatDateRange = (range) => {
  if (!range || !range[0] || !range[1]) return ''
  return `${formatDate(range[0])} 至 ${formatDate(range[1])}`
}
</script>

<style>
/* 全局样式 */
.resume-container {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  font-family: 'Microsoft YaHei', sans-serif;
  color: #333;
  line-height: 1.6;
  padding: 30px;
}

/* 模块通用样式 */
.resume-section {
  margin-bottom: 25px;
  background: #f8f9fa;
  border-left: 4px solid #2b7ccd;
  padding: 15px 20px;
  position: relative;
}

.resume-section h2 {
  color: #2b7ccd;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 15px -20px;
  padding-left: 15px;
  background: white;
  display: inline-block;
}

/* 基本信息网格布局 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 10px 0;
}

/* 时间范围格式 */
.education-item > p:first-of-type,
.project-item > p:first-of-type {
  font-weight: 500;
  color: #666;
  margin: 8px 0;
}

/* 课程列表样式 */
.education-item ul {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 10px 0;
  padding: 0;
}

.education-item li {
  list-style: none;
  background: #e9f2fa;
  padding: 4px 10px;
  border-radius: 3px;
}

/* 项目经验样式 */
.project-item {
  margin: 15px 0;
  padding-left: 15px;
  border-left: 2px solid #2b7ccd;
}

/* 技能网格布局 */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.skill-item {
  background: #e9f2fa;
  padding: 8px 12px;
  border-radius: 4px;
}

/* 特殊字段样式 */
strong {
  color: #2b7ccd;
  font-weight: 600;
}

/* 时间格式 */
[class$="-item"] p:first-child {
  font-style: italic;
  color: #666;
}
</style>
